<script lang="ts" setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  import * as echarts from 'echarts/core';
  const props = defineProps({
    seriesName: { type: Object as () => any, default: ['data 1', 'data 2'] },
  });

  const chartRef = ref<HTMLElement | null>(null);
  let chartInstance: echarts.ECharts | null = null;

  const option = ref<any>({
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0,24,48,0.8)',
      borderColor: '#00f6ff',
      borderWidth: 1,
      textStyle: { color: '#fff' },
      formatter: '{b}: {c}',
    },
    legend: {
      data: props.seriesName,
      left: 'center',
      bottom: '0%',
      textStyle: {
        color: '#fff',
        fontSize: 12,
      },
    },
    // grid: {
    //   left: '3%',
    //   right: '4%',
    //   bottom: '15%',
    //   containLabel: true, // 让 grid 包含坐标轴文本
    // },
    radar: {
      indicator: [
        { name: '', max: 100 },
        { name: '', max: 100 },
        { name: '', max: 100 },
        { name: '', max: 100 },
        { name: '', max: 100 },
      ],
      shape: 'circle',
      splitArea: {
        areaStyle: {
          color: ['#113873', '#152C58'],
        },
      },
      axisLine: {
        lineStyle: { color: 'rgba(0, 204, 248, 0.8)' }, // 雷达轴线样式
      },
      splitLine: {
        lineStyle: { color: '#017EF3' },
      },
      axisName: {
        color: '#b2eaff',
        fontSize: 13,
        textShadow: '0 0 8px #00f6ff',
      },
    },
    series: [
      {
        type: 'radar',
        symbol: 'circle',
        symbolSize: 6,
        // itemStyle: {
        //   shadowColor: '#00f6ff',
        //   shadowBlur: 10,
        // },
        // lineStyle: {
        //   width: 2,
        //   shadowColor: '#00f6ff',
        //   shadowBlur: 10,
        // },
        // areaStyle: {
        //   opacity: 0.4,
        //   shadowColor: '#00f6ff',
        //   shadowBlur: 20,
        // },
        data: [
          {
            value: [80, 90, 70, 85, 60],
            name: props.seriesName[0],
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(106, 244, 87, 0.6)' },
                { offset: 1, color: 'rgba(106, 244, 87, 0.1)' },
              ]),
            },
            lineStyle: {
              color: 'rgba(106, 244, 87, 1)',
            },
          },
          {
            value: [60, 70, 80, 60, 90],
            name: props.seriesName[1],
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(34, 217, 248, 0.6)' },
                { offset: 1, color: 'rgba(34, 217, 248, 0.1)' },
              ]),
            },
            lineStyle: { color: 'rgba(34, 217, 248, 1)' },
          },
        ],
        animation: true,
        animationDuration: 2000,
        animationEasing: 'cubicInOut',
      },
    ],
  });

  const initCharts = () => {
    try {
      if (chartRef.value && !chartInstance) {
        chartInstance = echarts.init(chartRef.value);
        chartInstance?.setOption(option.value, true);
      }
    } catch (error) {
      console.error('图表初始化失败:', error);
    }
  };

  const updateChart = () => {
    chartInstance?.setOption(option.value, true);
    handleResize();
  };

  onMounted(() => {
    // 确保在 DOM 加载完成后更新图表
    setTimeout(() => {
      initCharts();
    }, 100);

    // 添加窗口大小变化监听
    window.addEventListener('resize', updateChart);
  });

  onUnmounted(() => {
    // 移除窗口大小变化监听
    window.removeEventListener('resize', updateChart);
    chartInstance?.dispose();
  });

  watch(
    () => [],
    () => updateChart(),
    { deep: true }
  );

  defineExpose({
    updateChart, // 暴露方法到父组件
  });

  // 窗口大小变化处理
  const handleResize = () => {
    nextTick(() => {
      chartInstance?.resize();
    });
  };
</script>
<template>
  <div ref="chartRef" class="chart-container"></div>
</template>

<style scoped>
  .chart-container {
    width: 100%;
    height: 100%;
  }
</style>
